<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区域 -->
    <el-row :gutter="20" class="seacher">
      <el-col :span="8">
        <el-input v-model.number="keywork" placeholder="输入订单号🐈‍" clearable @clear="getOrderList">
          <el-button slot="append" icon="el-icon-search" @click="searchForPet"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- 订单区 -->
    <el-card class="box-card">
      <!-- 订单区 -->
      <div class="box-body">
        <table class="goods">
          <thead>
            <tr>
              <th width="150">订单编号</th>
              <th width="300">宠物信息</th>
              <th width="150">单价</th>
              <th width="150">数量</th>
              <th width="150">用户ID</th>
              <th width="150">宠物No</th>
              <th width="150">状态</th>
              <th width="150">时间</th>
              <th width="150">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 此处v-for -->
            <tr v-for="item in orderList" :key="item.oid">
              <td>{{ item.oid }}</td>
              <td>
                <a href="javascript:;" class="info">
                  <img :src="item.order_img" alt="" />
                  <div class="right">
                    <p>{{ item.pet_name }}</p>
                    <p>
                      颜色：{{ item.pet_color }}<br />
                      出生地：{{ item.pet_place }}
                    </p>
                  </div>
                </a>
              </td>
              <td>&yen;{{ item.pet_price }}</td>
              <td>1</td>
              <td>{{ item.uid }}</td>
              <td>{{ item.No }}</td>
              <td v-if="item.isCancel === 0">
                {{ item.isReturn === 1 ? '已退货' : item.isSend === 0 ? '未发货' : '已发货' }}
              </td>
              <td v-else>订单已取消</td>
              <td>{{ $toDate(item.create_time) }}</td>
              <td>
                <el-button
                  type="success"
                  :disabled="item.isSend === 1 || item.isCancel === 1 || item.isReturn === 1"
                  @click="send(item.oid)"
                  >宠物发货</el-button
                ><br />
                <el-button type="danger" :disabled="item.isCancel === 1" @click="cancel(item.oid)">取消订单</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 用户信息修改框 -->
  </div>
</template>

<script>
import { getOrderList, searchByOid, isSend, isCancel } from '@/api/ordermanage'
export default {
  name: 'OrderManage',
  data() {
    return {
      orderList: [],
      // 搜索框
      keywork: null,
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      insertVisible: false,
      formLabelWidth: '80px',
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const result = await getOrderList({ pagenum: this.queryInfo.pagenum })
      if (result.status != 0) return this.$message.error(result.message)
      this.orderList = result.data
      this.total = result.total.total
    },
    searchForPet() {
      searchByOid({ oid: this.keywork }).then((result) => {
        this.orderList = result.data
      })
    },
    // 分页区的当前页数据显示的条数
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    // 当前页面值
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },
    async send(oid) {
      const confirmResult = await this.$confirm('确定是否要发货！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return
      const result = await isSend({ oid })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.getOrderList()
    },
    async cancel(oid) {
      const confirmResult = await this.$confirm('确定取消订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return
      const result = await isCancel({ oid })
      if (result.status !== 0) return this.$message.error(result.message)
      this.$message.success(result.message)
      this.getOrderList()
    },
  },
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 40px;
}
.seacher {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-top: 20px;
}
.el-card {
  margin-top: 20px;
  height: 100%;
}
.el-form {
  margin-top: 50px;
}
.anquan-title {
  margin-top: 30px;
}
.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  .info {
    display: flex;
    text-align: left;
    text-decoration: none;
    color: #27ba9b;
    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }
    .right {
      line-height: 24px;
      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }
  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }
    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;
      &:first-child {
        border-left: 1px solid #f5f5f5;
      }
      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
